import { Form, FormInstance, Modal, TreeSelect } from "antd";
import { AddPositionBean } from "../../Position/data";
import { useEffect, useRef, useState } from "react";
import ProForm, { ProFormText } from "@ant-design/pro-form";
import { getNearDepartment } from "../../Department/service";

interface AddPositionProps {
    departmentId: string;
    pid: string;
    onSubmit: (values: AddPositionBean) => Promise<void>;
    onCancel: (flag?: boolean) => void;
    modalVisible: boolean;
    visibleHandler: (flag?: boolean) => void;
}

export default (props: AddPositionProps) => {

    const {
        onSubmit: handleAdd,
        onCancel: handleAddModalVisible,
        modalVisible: addModalVisible,
        departmentId,
        pid,
    } = props;

    const [treeDate, setTreeDate] = useState<any[]>([]);

    function convertData(data: { id: any; name: any; next_level: string | any[] }) {
        const node = {
            value: data.id,
            title: data.name,
            children: [] as any,
        };
        if (data.next_level && data.next_level.length > 0) {
            for (let i = 0; i < data.next_level.length; i++) {
                const child = convertData(data.next_level[i]);
                node.children.push(child);
            }
        }
        return node;
    }

    useEffect(() => {
        getNearDepartment(departmentId).then((res) => {
            if (res && res.code == 0) {
                    const data = res?.data;
                    const convert = [];
                    if (data && data.length > 0) {
                        for (let i = 0; i < data.length; i++) {
                            convert.push(convertData(data[i]));
                        }
                        setTreeDate(convert);
                    }
                }
        })
    }, [])

    const formRef = useRef<FormInstance>();

    return (
        <Modal
            title="添加职位"
            open={addModalVisible}
            width={550}
            footer={null}
            centered
            onCancel={() => handleAddModalVisible(false)}
            afterClose={() => handleAddModalVisible(false)}
        >
            <ProForm<AddPositionBean>
                onFinish={(values) => handleAdd(values)}
                formRef={formRef}
                layout="vertical"
            >
                <ProFormText
                    width={'xl'}
                    name="pid"
                    label="上级职位"
                    initialValue={pid}
                    hidden={true}
                />

                <Form.Item
                    name="department_id"
                    label="部门"
                    rules={[{ required: true, message: '必填' }]}
                >
                    <TreeSelect
                        showSearch
                        style={{ width: '100%' }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择部门"
                        allowClear
                        autoClearSearchValue
                        treeDefaultExpandAll
                        treeData={treeDate}
                    />
                </Form.Item>


                <ProFormText
                    width={'xl'}
                    name="name"
                    label="职位名称"
                    placeholder="请输入"
                    rules={[{ required: true, message: '请输入职位名称' }]}
                />
            </ProForm>
        </Modal>
    );
}